<!--
 * @Description: 
 * @Date: 2021-11-03 15:01:27
 * @LastEditTime: 2021-11-03 16:38:35
-->
<template>
  <div>
    <van-nav-bar
      title="全景图"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div
      ref="Create"
      class="Create"
    >
    </div>
  </div>
</template>
<script>
import { useRouter } from "vue-router";
import { ref, onMounted } from "vue";
import * as Three from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import negz from "../../assets/img/negz.jpg";
import posz from "../../assets/img/posz.jpg";
import posy from "../../assets/img/posy.jpg";
import negy from "../../assets/img/negy.jpg";
import posx from "../../assets/img/posx.jpg";
import negx from "../../assets/img/negx.jpg";
export default {
  name: "Create",
  data() {
    return {};
  },
  setup() {
    const myref = ref(DOMImplementation);
    const router = useRouter();
    const onClickLeft = () => {
      router.go(-1);
    };
    /*-------------------------------------------------------------------------------------*/
    onMounted(() => {
      // 1、创建场景和摄像机
      const scene = new Three.Scene();
      // 2、创建摄像机 PerspectiveCamera('视角', '指定投影窗口长宽比', '从距离摄像机多远开始渲染', '截止多远停止渲染100')
      const camera = new Three.PerspectiveCamera(
        40,//拍摄距离
        window.innerWidth / window.innerHeight,
        2,//最小范围
        1000//最大范围
      );
      // 3、创建ThreeJs 渲染器
      const renderer = new Three.WebGLRenderer({ antialias: true });
      // 设置渲染器场景大小
      renderer.setSize(window.innerWidth, window.innerHeight);
      console.log(document);
      document.querySelector(".Create").appendChild(renderer.domElement);

      // 创建几何模型 BoxGeometry('x轴', '轴', 'z轴')
      const geometry = new Three.BoxGeometry(10, 10, 10);

      // 创建纹理贴图  前后  上下  左右
      const texture0 = new Three.TextureLoader().load(negz);
      const texture1 = new Three.TextureLoader().load(posz);
      const texture2 = new Three.TextureLoader().load(posy);
      const texture3 = new Three.TextureLoader().load(negy);
      const texture4 = new Three.TextureLoader().load(posx);
      const texture5 = new Three.TextureLoader().load(negx);

      // 添加材质
      const material = [
        new Three.MeshBasicMaterial({ map: texture0, side: Three.DoubleSide }),
        new Three.MeshBasicMaterial({ map: texture1, side: Three.DoubleSide }),
        new Three.MeshBasicMaterial({ map: texture2, side: Three.DoubleSide }),
        new Three.MeshBasicMaterial({ map: texture3, side: Three.DoubleSide }),
        new Three.MeshBasicMaterial({ map: texture4, side: Three.DoubleSide }),
        new Three.MeshBasicMaterial({ map: texture5, side: Three.DoubleSide }),
      ];

      // 创建网格对象
      const cube = new Three.Mesh(geometry, material);
      // 添加到场景中去
      scene.add(cube);

      // 摄影机空间Z轴
      camera.position.set(2, 0, 0);
      camera.lookAt(scene.position);
      // camera.position.z = 4

      // 鼠标操作缩放
      // eslint-disable-next-line no-new
      new OrbitControls(camera, renderer.domElement);
      scene.minZoom = 1;
      // renderer.maxZoom = 1;
      // 添加帧渲染
      const animate = () => {
        requestAnimationFrame(animate);
        // 渲染场景
        renderer.render(scene, camera);
      };

      animate();

      // 自适应
      window.addEventListener("resize", () => {
        // 初始化摄像机
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        // 初始化渲染器尺寸
        renderer.setSize(window.innerWidth, window.innerHeight);
      });
    });

    return {
      myref,
      onClickLeft,
    };
  },
};
</script>